<script setup lang="ts">
//移动端菜单
import { ref, onMounted } from "vue";
import Img from "@/components/block/img.vue";
import Down from "@/assets/down.svg";
import {
  dataLocal,
  addActive,
  toggleAccordion,
  readLocal,
  modify,
} from "@/store/store";
import Mobile from "@/components/home/left/mobile-block.vue";

const data = dataLocal.menu;
//菜单展示状态
const active = ref(false);
const switchActive = () => {
  active.value = !active.value;
};

//处理后的响应式数组
const arrActive = ref(addActive(data));

//从浏览器中取得初始值
onMounted(() => {
  //拿到存储值
  const menuID = readLocal()[0];
  //修改状态
  modify(arrActive.value, menuID);
});
</script>

<template>
  <div class="relative bg-white cursor-pointer lg:hidden">
    <div
      class="h-12 flex items-center justify-between px-4 relative z-10 border-y"
      @click="switchActive"
    >
      <span class="text-base font-semibold text-black">岗位</span>
      <span :class="active ? 'rotate-180' : ''">
        <Img :img="Down" />
      </span>
    </div>
    <!--菜单-->
    <div
      class="fixed left-0 right-0 z-20"
      style="top: 104px; height: calc(100vh - 104px)"
      v-show="active"
    >
      <div class="bg-white overflow-y-auto" style="height: calc(100% - 70px)">
        <div v-for="(item, index) in arrActive" :key="item.id">
          <Mobile
            :data="item"
            :fatherSwitchActive="switchActive"
            @click="toggleAccordion(arrActive, index)"
          />
        </div>
      </div>
      <div class="h-full bg-black bg-opacity-50"></div>
    </div>
  </div>
</template>

<style scoped lang="less"></style>
